<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="el-icon-lx-calendar"></i> 表单</el-breadcrumb-item>
                <el-breadcrumb-item>test</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <!--  -->
            <div class="handle-box">
                <zk-list class="col-sm-12 col-md-12" :url="url" :req-params="reqParams" @get-data-after="getDataAfter" :title="title" :search="search"
                    ref="zklist">
                    <label slot="btnExt">
                        <el-button  type="primary" >新增</el-button>
                    </label>
                               <!-- 产品列表 -->
                    <el-table 
                        slot="table"
                        :data="tableData"
                        border 
                        class="table" 
                        ref="multipleTable" 
                        header-cell-class-name="table-header" 
                        @selection-change="handleSelectionChange"
                    >
                        <!-- 产品id -->
                        <el-table-column prop="id" label="产品ID" width="180" align="center"></el-table-column>
                        <!-- 产品名称 -->
                        <el-table-column prop="name" label="商品名称" width="250" align="center"></el-table-column>
                        <!-- 产品分类 prop="categoryId" -->
                        <el-table-column label="产品分类"  align="center">
                            <template slot-scope="scope" >{{scope.row.category.parentCategoryName}}->{{scope.row.category.categoryName}}</template>
                        </el-table-column>
                        <!-- 产品图片 -->
                        <el-table-column label="图片" align="center" >
                            <template slot-scope="scope">
                                <el-image class="table-td-thumb" :src="scope.row.logo"></el-image></template>
                        </el-table-column>
                        <!-- 产品月销量 -->
                        <el-table-column prop="monthSales" label="月销量"  align="center"></el-table-column>
                        <!-- 产品单价 -->
                        <el-table-column label="单价"  align="center"><template slot-scope="scope" >￥{{scope.row.price}}</template></el-table-column>
                        <!-- 产品数量 -->
                        <el-table-column prop="banlanceNumber" label="数量" align="center"></el-table-column>
                        <!--状态-->
                        <el-table-column label="状态"  align="center">
                            <template slot-scope="scope">
                                <el-button type="text"  @click="stateClick(scope.row)" :class="scope.row.status === 1 ? '' : 'gray'">{{scope.row.status === 1 ? '上架' : '下架'}} </el-button>
                            </template>
                        </el-table-column>
                        <!-- 操作 -->
                        <el-table-column label="操作"  align="center">
                            <template slot-scope="scope">
                                <el-button
                                    type="text"
                                    icon="el-icon-edit"
                                    @click="handleEdit(scope.$index, scope.row)"
                                >产品详情</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </zk-list>
            </div>
        </div>
   
    </div>
</template>

<script>
    import zkList from  '../common/zk_list.vue' 

    export default {
        data: function(){
            return {
                            title:"xx管理",    
                            url:'listgoods',
                            reqParams: {
                                name:"",
                                categoryId:"",
                                distributorId:""
                            },
                            search: [
                            {
                                label: '姓名',
                                field: "name",
                                value: '',
                                placeholder: "请输入..."
                            },
                            {
                                label: '分类',
                                field: "categoryId",
                                value: '',
                                type: "select",
                                url:"listcategroys",
                                params:1,
                                textname:'categoryName',
                                valuename:'id',
                                options: [
                                    // {
                                    //     text: "全部",
                                    //     value: 0
                                    // }, {
                                    //     text: "根茎类",
                                    //     value: 5
                                    // }, {
                                    //     text: "果实类",
                                    //     value: 6
                                    // }, {
                                    //     text: "苹果类",
                                    //     value: 10
                                    // }, {
                                    //     text: "雪梨类",
                                    //     value: 11
                                    // }, {
                                    //     text: "哈密瓜类",
                                    //     value: 12
                                    // }, {
                                    //     text: "西瓜",
                                    //     value: 13
                                    // }
                                ]
                            }, {
                                label: '类型',
                                field: "distributorId",
                                value: '',
                                type: "select",
                                textname:'text',
                                valuename:'value',
                                options: [{
                                    text: "上架",
                                    value: 1
                                }, {
                                    text: "下架",
                                    value: 0
                                }]
                            }],
                            tableData: [],
    
            }
        },
        components: {
            zkList
        },
        methods: {
            getDataAfter:function(val){
                this.tableData=val;
            },
            handleSelectionChange:function(){

            },
            stateClick:function(){

            },
            handleEdit:function(){

            },
           
        }
    }
</script>
<style scoped>
    .editor-btn{
        margin-top: 20px;
    }
    .handle{
        display: inline-block;
        margin-left: 10px;
    }
</style>